<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>[|.siteName|]</title>
    [|if .zTree|]
    <link rel="stylesheet" href="/static/zTree3/css/demo.css?t=5" type="text/css">
    <link rel="stylesheet" href="/static/zTree3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    [|end|]
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <script src="/static/layui/layui.js?s=36"></script>
    <script src="/static/js/main.js?s=2124"></script>
</head>

<body>
<div>
    <form>  
      
        <div class="layui-input-inline">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:70px">卡号:</label>
                <div class="layui-input-inline" style="width:180px">
                    <input type="number" name="CardID" id="CardID" lay-verify="required|number" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
         
            <div class="layui-inline ">
                <label class="layui-form-label" style="width:100px">使用状态：</label>
                <select name="isUsered" id = "isUsered" style="width:85px;height:35px" lay-verify=""  readonly>
                    <option value="">--请选择--</option> 
                    <option value="1">已使用</option>
                    <option value="2">未使用</option>
                </select>
            </div>
            
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="starquery">开始查询</button>
            </div>

        </div>
        
    </form>
    <table  class="layui-table" id="userinfotable" lay-size="sm" lay-filter="layfilteruserinfotable"> </table> 
</div>


<script type="text/html" id="UserFINSTMe">
    {{#  if(d.columnN ==="1970-01-01 08:00:00" ){ }}
    
    {{#  } else { }}
        {{d.columnN}}
    {{#  } }}
</script>

<script>
    var $;

    layui.config({
            base : "js/"
    }).use(['form','element','layer','jquery','table','laydate'], function(){
        var table = layui.table;
        var element = layui.element;
        var form = layui.form;
        var layedit = layui.layedit
        var laydate = layui.laydate;
        $ = layui.jquery;
    //监听表格复选框选择
   // table.on('checkbox(demo)', function(obj){
    //   console.log(obj);
   // });

    //监听工具条

    ShowTablesDatas(table)
    form.on('submit(starquery)', function(data) { 
        ShowTablesDatas(table)   
        return false;
    });

   
    return false;
}); 


function ShowTablesDatas(thisTabble){
 
    var dCardID =  document.getElementById("CardID");
    var disUsered =  document.getElementById("isUsered");
   

    thisTabble.render({
        elem:'#userinfotable'
        ,url:'/userrecord/userrecordnewcardtable'
        ,where: {
                CardID: dCardID.value
                ,isUsered:disUsered.value
             
        }
        ,done: function(res, curr, count) {
            GetPageTitleData(res.titleinfo)
        }
        ,cols: [[ //标题栏
            {field:'columnA',title:'卡号',width:100}
            ,{field:'columnB',title:'金额',width:120}
            ,{field:'columnC',title:'使用状态',width:120}
            ,{field:'columnD',title:'类型',width:160}
            ,{field:'columnD',title:'使用者',width:160}
            ,{field:'columnD',title:'使用日期',width:160}
                ]] 
        ,skin: 'row' //表格风格
        ,even: true
        ,page: true //是否显示分页
        ,limits: [50,100,200]
        ,limit: 100//每页默认显示的数量
        ,width: 'full-10'
        ,rules: 'all'
        ,height: 'full-170'
    });
}

function GetPageTitleData(titleinfo){
   // alert(JSON.stringify(titleinfo))
   
 
}

</script>
</body>

</html>